import React from "react";
import Father from "./components/Connection";
import Life from "./components/Life";
import Move from "./components/Move"
import ImgMove from "./components/imgMove";
import MouseMove from "./components/MouseMove";
import imgurl from "./imgs/pic.jpg"

import withMove from "./components/withMove";


class H1 extends React.Component{
  render(){
    console.log(this.props)
    return <h1>坐标：x:{this.props.x} --- y:{this.props.y}</h1>
  }
}

class Img extends React.Component{
  render(){
    return <img src={imgurl} alt="" style={{
      position:"absolute",
      left:this.props.x,
      top:this.props.y
     }}></img>
  }
}

let BigMove=withMove(H1)
let BigMoveImg=withMove(Img)

class App extends React.Component{
  state={
    flag:true
  }
  render(){ 
    return <div className="App">
      {/* { this.state.flag ? <Life test={"123321"}></Life> :<p>组件消失了</p> }
      <button onClick={()=>{
        this.setState({
          flag:false
        })
      }}>点击</button>
      */}

      {/* <Move></Move>
      <ImgMove></ImgMove> */}

      {/* 实现组件的复用：
      1.render(children)-props模式 
      2.高阶组件：采用包装模式，增强组件的功能
        高阶组件实际上就是一个函数，接收要包装的组件，返回增强之后的组件
      */}
      {/* <MouseMove>
        {(data)=>{
         return <h1>坐标：x:{data.x} --- y:{data.y}</h1>
        }}
      </MouseMove>
      

      <MouseMove>
      {(data)=>{
         return <img src={imgurl} alt="" style={{
          position:"absolute",
          left:data.x,
          top:data.y
         }}></img>
      }}
      </MouseMove> */}


      <BigMove a="666"></BigMove>
      <BigMoveImg></BigMoveImg>


    
    </div>
  }
}

export default App;
